<template>
  <div class="section flex_center" ref="parent">
    <div class="border-row"></div>
    <div class="border-col"></div>
    <div class="flex_center" style="width:100%;height:100%" >
      <el-row :gutter="20" class="box_item" v-if="!jz">
      <el-col :span="7" class="box_col">
        <div
          class="box_yh2 box_yh_an"
          :style="`height:${chartsDom.height};width:${itemWidth};color:lightgreen`"
        >
          <div class="mid-bg-1 box">
            <div style="font-size:12px">企业关注量</div>
            <div style="font-size:16px;margin:8px 0 0 0">{{dataAll.enterprise}}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="7" class="box_col">
        <div
          class="box_yh2 box_yh_an"
          :style="`height:${chartsDom.height};width:${itemWidth};color:hotpink`"
        >
          <div class="mid-bg-2 box">
            <div style="font-size:12px">简历投递数</div>
            <div style="font-size:16px;margin:8px 0 0 0">{{dataAll.postdelivery}}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="7" class="box_col">
        <div
          class="box_yh2 box_yh_an"
          :style="`height:${chartsDom.height};width:${itemWidth};color:lightgreen`"
        >
          <div class="mid-bg-3 box">
            <div style="font-size:12px">岗位收藏数</div>
            <div style="font-size:16px;margin:8px 0 0 0">{{dataAll.favorite}}</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="container_jz box_item"  v-if="jz">
              <div class="circle_jz"></div>
              <div class="circle_jz"></div>
              <div class="circle_jz"></div>
            </div>
    <el-row :gutter="20" class="box_item" v-if="!jz2">
      <el-col :span="7" class="box_col">
        <div class="box_yh box_yh_an"
          :style="`height:${chartsDom.height};width:${itemWidth};margin-top:15px;color:hotpink`">
          <div
          class="mid-bg-1 box"
          ref="box"
        >
          <div style="font-size:12px">人才关注量</div>
          <div style="font-size:16px;margin:8px 0 0 0">{{dataAll2.talent}}</div>
        </div>
        </div>
      </el-col>
      <el-col :span="7" class="box_col">
         <div
          class="box_yh box_yh_an"
          :style="`height:${chartsDom.height};width:${itemWidth};margin-top:15px;;color:lightgreen`"
        >
        <div
          class="mid-bg-2 box"
        >
          <div style="font-size:12px">邀请投递数</div>
          <div style="font-size:16px;margin:8px 0 0 0">{{dataAll2.invitation}}</div>
        </div>
         </div>
      </el-col>
      <el-col :span="7" class="box_col">
        <div class="box_yh box_yh_an"
          :style="`height:${chartsDom.height};width:${itemWidth};margin-top:15px;;color:hotpink`">
        <div
          class="mid-bg-3 box"
        >
          <div style="font-size:12px">达成意向数</div>
          <div style="font-size:16px;margin:8px 0 0 0">{{dataAll2.reach}}</div>
        </div>
        </div>
      </el-col>
    </el-row>
    <div class="container_jz box_item"  v-if="jz2">
              <div class="circle_jz"></div>
              <div class="circle_jz"></div>
              <div class="circle_jz"></div>
            </div>
    </div>
    
  </div>
</template>
<script>
import { getMiddleData } from "@/api/data";
export default {
  data() {
    return {
      chartsDom: {},
      chartData: null,
      itemWidth: "",
      dataAll: {},
      dataAll2: {},
      jz:true,
      jz2:true
    };
  },
  props: ["height", "dateProp"],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth;
      },
      set(val) {
        this.chartsDom = {
          width: val - 30 + "px",
          height: (this.height - 10) / 2 - 10 + "px",
          "z-index": 100,
          position: "relative"
          // 'background-color': 'red'
        };
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.itemWidth = this.chartsDom.height;
    this.$nextTick(_ => {
      this.init();
    });
  },
  methods: {
    init() {
      this.jz=true
      this.jz2=true
      getMiddleData(this.dateProp).then(({ data: { data } }) => {
        this.dataAll = data;
        this.jz=false
      });
      getMiddleData(this.dateProp).then(({ data: { data } }) => {
        this.dataAll2 = data;
        this.jz2=false
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
.section {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  
}
.flex_center{
  display flex
  justify-content center
  align-items center
  flex-direction column
}

.box {
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: rgba(4, 24, 76, 1);
  z-index: 3;
  width: 90%;
  height: 90%;
  border-radius: 50%;
}

.box_item{
  display flex
  justify-content space-around
  align-items center
  box-sizing border-box
  width 90%
}

.box_col{
    display flex
    justify-content space-around
    align-items center
}
</style>